<template>
	<view class="contianer">
		<view class="project-search-box">
			<view class="select-project">
				    <uni-data-select
				      v-model="curProject"
				      :localdata="allProject"
					  placeholder="选择项目"
				    ></uni-data-select>
			</view>
			<view class="search">
				<uni-easyinput prefixIcon="search" v-model="searchValue" placeholder="左侧图标" @iconClick="iconClick">
							</uni-easyinput>
			</view>
		</view>
		<view class="project-list">
			<uni-collapse ref="collapse">
				<uni-collapse-item class="project-list-item" v-for="num in 3" :key="num">
					<template #title>
						<view class="list-item-title">
							<view class="list-type">
								<text v-if="num%2 ==0">天然</text>
								<text v-if="num%2 ==1">人工</text>
								</view>
							<view class="list-name">632823-2021-A001</view>
							<view class="list-status">
								<text v-if="num%2 ==0" style="color: red;">未调查</text>
								<text v-if="num%2 ==1" style="color: green;">已调查</text>
							</view>
						</view>
					</template>
					<view class="content">
						<!-- <view class="step-wrap">
							<uni-section type="line" padding>
										<uni-steps :options="steplist" active-color="#007AFF" :active="active" direction="column" />
									</uni-section>
						</view> -->
					<!-- 	<view class="squarelist" v-for="(square,key) in item.squares" @click="gotoSquire(square)">
							<view class="square-icon"></view>
							<view class="square">{{square.number}}</view>
						</view>
						<view class="btns">
							<view class="plotBtn" v-for="(btn,key ) in item.btns">{{btn}}</view>
						</view> -->
						<view class="button-wrap">
							<view class="btn-item">盛期调查</view>
							<view class="btn-item">返青调查</view>
						</view>
					</view>
				</uni-collapse-item>

			</uni-collapse>
		</view>
		<view class="bottom-btn">
			<view class="btn">新增样地</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				searchValue: null,
				curProject: null,
				 allProject: [
					{ value: 0, text: "项目1" },
					{ value: 1, text: "项目2" },
					{ value: 2, text: "项目3" },
				  ],
				  steplist:  [{
					title: '草地类型'
				}, {
					title: '生物量'
				}, {
					title: '温湿度'
				}],
			}
		}
	}
</script>

<style  lang="scss" scoped>
	.contianer{
		height:100vh;
		background-color:#eee;
		.project-search-box{
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			box-sizing: border-box;
			padding: 20rpx 15rpx;
			.select-project{
				width: 30%;
			}
			.search{
				width: 65%;
				border-radius: 40rpx;
				overflow: hidden;
			}
		}
		.project-list ::v-deep{
			width: 100%;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			.uni-collapse{
				background-color: unset;
			}
			.project-list-item{
				margin-bottom: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				overflow: hidden;
				background-color: #fff;
				
				.list-item-title{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					box-sizing: border-box;
					padding: 15rpx 20rpx;
					position: relative;
					.list-type{
						display: inline-block;
						box-sizing: border-box;
						padding: 0 20rpx;
						height: 1.6em;
						line-height: 1.6em;
						background-color: #ffa502;
						color: #fff;
						border-radius: .8em;
						margin-right: 10rpx;
					}
					.list-status{
						float: right;
						position: absolute;
						right: 10rpx;
					}
				}
				.content{
					box-sizing: border-box;
					padding-bottom: 30rpx;
				}
				.uni-section-header{
					display: none;
				}
				.button-wrap{
					width: 100%;
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					align-items: flex-start;
					box-sizing: border-box;
					padding: 10rpx 20rpx;
					.btn-item{
						box-sizing: border-box;
						padding: 0 20rpx;
						font-size: 28rpx;
						height: 2em;
						line-height: 2em;
						background-color: #00aaff;
						border-radius: 1em;
						color: #fff;
						margin-right: 20rpx;
					}
				}
			}
		}
		.bottom-btn{
			width:100%;
			background-color: #fff;
			z-index:3;
			margin:0 auto;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			padding: 20rpx 0;
			.btn{
				width: 60vw;
				height:60rpx;
				border-radius:30rpx;
				text-align: center;
				line-height: 60rpx;
				background-color:#00aaff;
				color:#fff;
				cursor: pointer;
			}
		}
	}
	.cap{
		margin-right:25rpx;
	}
	.squarelist{
		width: 100%;
		height: 60rpx;
		padding-left: 60rpx;
		.square-icon{
			width:20rpx;
			height: 20rpx;
			margin: 15rpx;
			border-radius:20rpx;
			border:2px solid #1890ff;
			float:left;
		}
		.square{
			float: left;
			margin-left: 15px;
			height: 60rpx;
			line-height: 50rpx;
			font-size: 35rpx;
			color:#1890ff;
		}
	}
	.btns{
		width: 100%;
		height: 80rpx;
		.plotBtn{
			width: 25%;
			height: 60rpx;
			float: left;
			margin-left: 10rpx;
			background-color: #00aaff;
			line-height:60rpx;
			border-radius: 30rpx;
			color:#fff;
			text-align: center;
			margin-top: 10rpx;
		}
	}
	
</style>